<template>
  <div>
    <h3 class="box-title">商品信息</h3>
    <div class="box-body">
      <table class="goods">
        <thead>
          <tr>
            <th width="520">商品信息</th>
            <th width="170">单价</th>
            <th width="170">数量</th>
            <th width="170">小计</th>
            <th width="170">实付</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>
              <a href="javascript:;" class="info">
                <img :src="item.picture" alt="" />
                <div class="right">
                  <p>{{ item.name }}</p>
                  <p>{{ item.attrsText }}</p>
                </div>
              </a>
            </td>
            <td>&yen;{{ item.price }}</td>
            <td>{{ item.count }}</td>
            <td>&yen;{{ item.count * item.price }}</td>
            <td>&yen;{{ item.count * item.price }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    list() {
      let arr = this.$store.state.Cart.list.filter((item) => {
        return item.selected;
      });
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped></style>
